<template>
	<div style="overflow: hidden;overflow-y: scroll; max-height: 800px;padding-left: 20px;">
		<div class="appjurisdictionItem">
			<div class="tree-head">
				<table class="tree-table">
					<tr>
						<td class="td1">名称</td>
						<td class="td2">图形文件</td>
						<td class="td3">网站页面</td>
						<td class="td4">描述</td>
					</tr>
				</table>
			</div>
			<multipleSelection ref="miniSelection" :dataList="appRightList" :selectionType="selectionType" :getIdMethod="item => item.id"></multipleSelection>
		</div>
	</div>
</template>

<script>
	import multipleSelection from '@/components/module/selection/base/roleMultipleSelection.vue'
	import roleManagerStore from './roleManagerStore.js'
	export default {
		components: {
			multipleSelection
		},
		props: {
			
		},
		data() {
			return {
				selectionType: 'multiple',
				// pcmRightList: undefined,
			}
		},
		created() {},
		mounted() {
			this.coverCheckedIds()
		},
		destroyed() {
			
		},
		computed: {
			user() {
				return roleManagerStore.state.nowRole
			},
			unit() {
				return roleManagerStore.state.nowUnit
			},
			allRightList() {
				return roleManagerStore.state.allRightDatas
			},
			/* menuRightList() {
				return roleManagerStore.state.allRightDatas.menuRight
			}, */
			appRightList() {
				return roleManagerStore.state.allRightDatas.miniRight
			},
			nowMenuCheckedIds: {
				get:function(){
					return roleManagerStore.state.nowUserMenuRightIds
				},
				set:function(newValue){
					return roleManagerStore.state.nowUserMenuRightIds = newValue
				}
			},
			// nowMiniCheckedIds() {
			// 	return roleManagerStore.state.nowUserAppRightIds
			// },
			nowMiniCheckedIds: {
				get:function(){
					return roleManagerStore.state.nowUserAppRightIds
				},
				set:function(newValue){
					return roleManagerStore.state.nowUserAppRightIds = newValue
				}
			},
			editDisableMenuList() {
				return roleManagerStore.state.editDisableMenuList
			},
			editDisableAppList() {
				return roleManagerStore.state.editDisableAppList
			},
			userRolesRights() {
				return roleManagerStore.state.nowUserRolesRights
			},
			needSave(){
				var resultMenu = false
				var resultApp = false
				
				
				if(isempty(this.appRightList)){
					resultApp = false
				}else{
					var appRight = []
					var appKeys = Object.keys(this.$refs.miniSelection.nowSelectIds)
					for(let i = 0;i < appKeys.length;i++){
						if(this.$refs.miniSelection.nowSelectIds[appKeys[i]]){
							appRight.push(appRight[i])
						}
					}
					if(this.nowMiniCheckedIds.length == appRight.length){
						for(let i = 0;i < appRight.length;i++){
							if(this.nowMiniCheckedIds.indexOf(appRight[i]) < 0){
								resultApp = true
								break
							}
						}
					}else{
						resultApp = true
					}
				}
				if(!resultMenu && !resultApp){
					return false
				}else{
					return true
				}
			}
		},
		watch: {
			nowMenuCheckedIds(nv,ov){
				this.resetDatas()
			}
		},
		methods: {
			resetDatas() {
				this.$refs.miniSelection.setNowCheckedIds(this.nowMiniCheckedIds)
				this.$refs.miniSelection.setEditDisableList(this.editDisableAppList)
			},
			saveEdit(){
				/* if(!this.needSave){
					return
				} */
				// var menuRight = []
				// var menuKeys = Object.keys(this.$refs.menuSelection.nowSelectIds)
				// for(let i = 0;i < menuKeys.length;i++){
				// 	if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]){
				// 		menuRight.push(menuKeys[i])
				// 	}
				// }
				
                var miniRight = []
				var miniKeys = Object.keys(this.$refs.miniSelection.nowSelectIds)
                // console.log();
				for(let i = 0;i < miniKeys.length;i++){
					if(this.$refs.miniSelection.nowSelectIds[miniKeys[i]]){
						miniRight.push(miniKeys[i])
					}
				}
				var rightArr = miniRight
				var rightIds = rightArr.join(',')
				this.$api.roleApi.addRoleRight(this.user.id, rightIds, res => {
					this.$dialogMethod.showMessage(res)
					this.resetCheckedIds()
				}, failure => {
					this.$dialogMethod.showMessage(failure)
				})
			},
			resetCheckedIds(){
				// var webRight = []
				// var menuKeys = Object.keys(this.$refs.menuSelection.nowSelectIds)
				// for(let i = 0;i < menuKeys.length;i++){
				// 	if(this.$refs.menuSelection.nowSelectIds[menuKeys[i]]){
				// 		webRight.push(menuKeys[i])
				// 	}
				// }
				// var appRight = []
				// var appKeys = Object.keys(this.$refs.miniSelection.nowSelectIds)
				// for(let i = 0;i < appKeys.length;i++){
				// 	if(this.$refs.miniSelection.nowSelectIds[appKeys[i]]){
				// 		appRight.push(appKeys[i])
				// 	}
				// }

                var miniRight = []
				var miniKeys = Object.keys(this.$refs.miniSelection.nowSelectIds)
				for(let i = 0;i < miniKeys.length;i++){
					if(this.$refs.miniSelection.nowSelectIds[miniKeys[i]]){
						miniRight.push(miniKeys[i])
					}
				}
				// this.nowMenuCheckedIds = webRight
				this.nowMiniCheckedIds = miniRight
			},
			coverCheckedIds(){
				this.$refs.miniSelection.setNowCheckedIds(this.nowMiniCheckedIds)
			}
		}
	}
</script>

<style>
	.appjurisdictionItem{
		/* border: solid 1px #E4E4E4; */
		box-sizing: border-box;
		/* float: left; */
		width: 100%;
		/* margin-right: 30px;
		width: calc(100% - 15px);
		margin-left: 20px; */
	}
	
	.appjurisdictionItem:last-child{
		margin-right: 0;
	}
	
	.appjurisdictionItem .list-body{
		border: none;
	}
	
	/* .jurisdictionTitle{
		font-size: 14px;
		color: #666666;
		line-height: 20px;
		background: #E3E7EC;
		text-align: center;
		line-height: 30px;
	} */
	.appjurisdictionItem  table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
}

.appjurisdictionItem table td {
    word-break: break-all;
    word-wrap: break-word;
    font-size: 14px;
    font-weight: 600;
}
  th,
  td {
    text-align: left;
}
  .tree-table .td1 {
    width: 20%;
    padding-left: 2%;
}
.tree-table .td2 {
    width: 17%;
}
.tree-table .td3 {
    width: 18%;
}
.tree-table .td4 {
    width: 29%;
}

  .tree-head {
    background: rgb(220, 236, 242);
    padding: 0.08rem 0;
}
  .tree-head td {
    color: rgb(19, 154, 230);
    box-sizing: border-box;
}
</style>
